<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form input</title>
	<style>
		body{
			margin-bottom: 5em;
		}
		input{
			display: block;
			width:20em;
			padding-left: 3em;
			margin: 1em;
		}
		input.red::-webkit-input-placeholder { color: rgb(100, 0, 0); }
	</style>
	<script src="../../public/js/jquery.js"></script>
	<script>
	 	$(function(){
			//$('.js_text').focus();
			$('.js_text').on('input',function(){
				$(this).css('padding-left',0);
			});

			$('.js_range').on('input',function(){
				var num = $(this).val();
				$(this).next().text(num);
			});
		});
	</script>
</head>
<body>
	<input class="js_text css_text" type="text" placeholder="this is placeholder use autofoucs" autofocus="autofocus">

	<input type="email" placeholder="email">

	<input type="number" max=10 min=1 step=1 value=5 maxlength=2 id="num"><span>number</span>

	<input class="js_range" type="range" min="0" max="10" step="1" value="5"><span>range 5</span>

	<input type="date" placeholder="this is date, but only Opera support it!">

	<input type="search" placeholder="this is search with round corners">

	<input class="js_text red" type="text" disabled placeholder="disabled cannot submit, webkit red text" 
		name="disabled" form="myForm">

	<input type="text" placeholder="readonly text can submit" readonly 
		name="readonly" form="myForm">

	<input type="text" name="text" placeholder="show datalist. only FF and Opera" list="list">

	<datalist id="list">
		<option value="1"></option>
		<option value="2"></option>
		<option value="3"></option>
	</datalist>

	<input type="text" name="outOfFormText" form="myForm" placeholder="out of form but can submit!" 
		autocomplete="on">
	<span>safari autocomplete 不行，可能是设置的问题，考虑到安全性?</span>

	<div>
		<form action="" id="myForm">
			<input type="submit" value="submit">
		</form>
	</div>
	<input type="file" multiple name="file" form="myForm"><span>Chrome?(I cannot!) FF Opera can select more than one files</span>
    <section>
		<header>再次学习</header>
		<input type="color" placeholder="color safari 不支持"/>
		<input type="date" placeholder="date safari 不支持"/>
		<input type="time" placeholder="time safari 不支持"/>
		<input type="datetime" placeholder="datetime chrome/safari 不支持"/>
		<input type="datetime-local" placeholder="datetime-local safari 不支持"/>
		<p>novalidate input忽略验证</p>
		<output form="myForm" for="num" name="output"></output>
		<keygen keytype="rsa" challenge="levy"/>
	</section>
</body>
</html>
